<!-- xml version="1.0" encoding="utf-8" -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<?php
if (count($_POST['nums']) < 1) {
	header('Location: Vocabulary.php');
}
?>

<head>
	<title>Latin at Sight</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link href="flashcard.css" rel="stylesheet" type="text/css">
</head>

<?php

try {
	$db = new PDO('sqlite:delectus.db3');
	$words = array();
	foreach($_POST['nums'] as $num) {
		$q = $db->query("SELECT verbum, type, definition FROM vocabulary WHERE number=$num;");
		$words = array_merge($words, $q->fetchAll(PDO::FETCH_NUM));
	}
	shuffle($words);
	
	$db = NULL;
} catch (PDOException $e) {
    print "Error!: " . $e->getMessage() . "<br/>";
    die();
}

?>
<script type="text/javascript">
<?php
print "var words = new Array(".count($words).");\n";
for($i = 0; $i < count($words); $i++) {
	$words[$i][2] = preg_replace('/([a-z]+\.)/', "<span class=\"vtype\">$1</span>", $words[$i][2]);
	$words[$i][2] = preg_replace('/\[([^\]]+)\]/', "<br />[<span class=\"vl\">$1</span>]", $words[$i][2]);
	$words[$i][2] = preg_replace('/(\(W\.[^)]+\))/', "<span class=\"wl\">$1</span>", $words[$i][2]);

	$tmp = implode("', '", $words[$i]);

	print "words[$i] = ['$tmp'];\n";
}
?>

var shown = 0;

function updateVoc() {
	var i = Math.floor(shown / 3);

	var j = shown % 3;
	var w0, w2;
	if (document.getElementById("efirst").checked) {
		w0 = words[i][2];
		w0 = w0.replace(/<br \/>\[[^\]]+\]/, '');
		w2 = words[i][0];
		document.getElementById("v1").className = "v3";
		document.getElementById("v3").className = "v1";
	} else {
		w0 = words[i][0];
		w2 = words[i][2];
		document.getElementById("v1").className = "v1";
		document.getElementById("v3").className = "v3";
	}

	if (j == 0) {
		document.getElementById('v1').innerHTML = w0;
		document.getElementById('v2').innerHTML = "";
		document.getElementById('v3').innerHTML = "";
	} else if (j == 1) {
		document.getElementById('v1').innerHTML = w0;
		document.getElementById('v2').innerHTML = words[i][1];
		document.getElementById('v3').innerHTML = "";
	} else if (j == 2) {
		document.getElementById('v1').innerHTML = w0;
		document.getElementById('v2').innerHTML = words[i][1];
		document.getElementById('v3').innerHTML = w2;
	}
}

function next() {
	shown++;
	if (shown > words.length * 3 - 1) {
		shown = 0;
		alert('All done!');
	}
	updateVoc();
}

function prev() {
	shown--;
	if (shown < 0) {
		shown = words.length * 3 - 1;
		alert('All done!');
	}
	updateVoc();
}


</script>

<body onload="updateVoc()">

<h1 style="text-align:center">Latin at Sight</h1>

<div class="center">

<div id="v1" class="v1"></div>
<div id="v2" class="v2"></div>
<div id="v3" class="v3"></div>

<a href="#" class="button" id="btnprev" onclick="prev()" accesskey="p">&lt;&lt;</a>
<a href="#" class="button" id="btnnext" onclick="next()" accesskey="n">&gt;&gt;</a>


</div>
<div class="options">
<label for="efirst"><input id="efirst" name="efirst" type="checkbox" onclick="shown=0;updateVoc();"/>English First</label>
</div>
</body>
</html>
